<template>
<div class="singer" v-loading="!singers.length">
  <index-list
    :data="singers"
    @select="selectSinger"
  ></index-list>
  <!-- 用router-view去承载二级路由 -->
<!--  <router-view :singer="selectedSinger"></router-view>-->
  <!-- vue3需要在router-view中使用transition, appear进入时候也会有动画 -->
  <router-view v-slot="{ Component }">
<!--  singer-detail返回动画无效 研究  -->
    <transition appear name="slide">
      <!-- component动态组件Component就是作用域插槽中的一个属性，这个是由router-view这个组提供的
       Component就是你的路由表中的路由组件
       exclude="singer-detail"排除不缓存数据的组件否则会缓存数据导致每次数据都不重新请求
       -->
      <keep-alive exclude="singer-detail">
        <component :is="Component"
                   :singer="selectedSinger"
        ></component>
      </keep-alive>
    </transition>
  </router-view>
</div>
</template>

<script type="text/ecmascript-6">
import { getSingerList } from '@/service/singer'
import IndexList from '@/components/base/index-list/index-list'
import storage from 'good-storage'
import { SINGER_KEY } from '@/assets/js/constant.js'

export default {
  name: 'recommend',
  components: { IndexList },
  data() {
    return {
      singers: [],
      selectedSinger: null
    }
  },
  async created() {
    const result = await getSingerList()
    this.singers = result.singers
  },
  methods: {
    selectSinger(singer) {
      this.selectedSinger = singer
      this.cacheSinger(singer)
      // 传递数据并实现跳转
      this.$router.push({
        path: `/singer/${singer.mid}`
      })
    },
    // 缓存对象，用于在歌手详情页刷新也可以保存数据
    // 将第一次获取的数据保存在sessionStorage中
    cacheSinger(singer) {
      storage.session.set(SINGER_KEY, singer)
    }
  }
}
</script>

<style lang="scss" scoped>
.singer {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
}

</style>
